<template>
  <el-dialog v-if="load" title="查看发货仓库" v-model="visible" align-center width="500px" @close="handleClose" :close-on-click-modal="false">
    <div class="content">
      <p v-for="(item, index) in transport" :key="index" class="text-[#333]">{{ item }}</p>
    </div>
    <template #footer>
      <el-button type="primary" :loading="loadings.submit" @click="close">确认</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, toRefs } from 'vue';
import { ElMessage } from 'element-plus'
const load = ref(false)
const visible = ref(false)
let loadings = reactive({})
const emit = defineEmits(['close'])
const data = reactive({
  transport: []
})
const { transport } = toRefs(data)
// 打开弹窗
const open = async (arr) => {
  if (!load.value) {
    load.value = true
    await 1
  }
  transport.value = arr
  loadings = reactive({})
  visible.value = true
}
// 关闭弹窗
const close = () => {
  visible.value = false
}

const handleClose = () => {
  emit('close')
}
// 提交
const submit = () => {
  loadings.submit = true
  api.submit().then(res => {
    close()
  }).finally(() => {
    loadings.submit = false
  })
}

defineExpose({ open })
</script>
<style lang="scss" scoped>
.content {
  margin: 20px 100px;
}
</style>